用html5实现移动端滚动背景

工具:Sublime Text2,tomcat 8,Google Chrome
语言:javascript
目标:利用html5 canvas实现移动端触摸滚动背景。

1.touch事件介绍

touch事件
- touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
- touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
- touchend事件：当手指从屏幕上离开的时候触发。
- touchcancel事件：当系统停止跟踪触摸的时候触发。
touch事件的对象：
- touches：表示当前跟踪的触摸操作的touch对象的数组。
- targetTouches：特定于事件目标的Touch对象的数组。
- changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
每个Touch对象包含的属性:
- clientX：触摸目标在视口中的x坐标。
- clientY：触摸目标在视口中的y坐标。
- identifier：标识触摸的唯一ID。
- pageX：触摸目标在页面中的x坐标。
- pageY：触摸目标在页面中的y坐标。
- screenX：触摸目标在屏幕中的x坐标。
- screenY：触摸目标在屏幕中的y坐标。
- target：触目的DOM节点目标。

2.实现的js代码

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
var img = document.getElementById("image");
img.onload = function(){ctx.drawImage(img,0,0);}

document.getElementById("canvas").addEventListener('touchstart', touchStart,false);  
document.getElementById("canvas").addEventListener('touchmove', touchMove,false);  
document.getElementById("canvas").addEventListener('touchend', touchEnd,false); 

var  startX, //触摸时的坐标
        startY,
        x=0,      //存取偏移位置的临时变量
        y=0,
        slideX, //滑动的距离
        slideY,
        aboveX=0, //记录上一次偏移的位置 
        aboveY=0;          
function touchStart(e){//触摸
             e.preventDefault();
             var touch = e.touches[0];//获取第一个target
             startX = touch.pageX;    //刚触摸时的坐标   
             startY = touch.pageY;                 
}
function touchMove(e){//滑动          
             e.preventDefault();//用来阻止默认事件        
             var touch = e.touches[0];   
             slideX = touch.pageX - startX;//滑动的距离            
             slideY = touch.pageY - startY;

             x = aboveX - slideX; //相对于(0,0)的偏移量
             y = aboveY - slideY;
             if(x >= 288) x = 288;//canvas与图片大小的最大偏移量
             if(y >= 192) y = 192;
             if(x <= 0) x = 0;
             if(y <= 0) y = 0;

             ctx.drawImage(img,x,y,960,576,0,0,960,576);//剪切图片
}  
function touchEnd(e){//手指离开屏幕
             e.preventDefault();      
             aboveX = x;     //touch结束后用来记录最后剪切的位置
             aboveY = y;           

}